<template>
	<view class="gy-panel" :class="{card: props.isCard}">
		<view v-if="props.showTitle" class="panel-title">
			<view class="panel-name" :class="{underline: props.showNameUnderline}">{{ props.title }}</view>
            <view class="panel-more">
                <slot name="action">
                	<view v-if="props.showMore" class="panel-more-btn" @click="emits('more')">
                		<text>{{ props.showMoreText }}</text>
                		<com-icon name="gy_icon_arrowRight" :size="24" color="#999999" />
                	</view>
                </slot>
            </view>
		</view>
		<slot></slot>
	</view>
</template>

<script lang="ts" setup>

    const emits = defineEmits(["more"]);

    const props = defineProps({
    	title: {
    		type: String,
    		default: "卡片面板"
    	},
        isCard: {
        	type: Boolean,
        	default: false
        },
    	showTitle: {
    		type: Boolean,
    		default: true
    	},
    	showNameUnderline: {
    		type: Boolean,
    		default: true
    	},
    	showMore: {
    		type: Boolean,
    		default: false
    	},
        showMoreText: {
        	type: String,
        	default: "更多"
        }
    });
</script>

<style lang="scss" scoped>
	.gy-panel {
	    background-color: #fff;
	    border-radius: 20rpx;
	    .panel-title{
	        width: 100%;
	        height: 100rpx;
	        display: flex;
	        justify-content: space-between;
	        align-items: center;
	        padding: 0 var(--gy-gap);
	        border-bottom: 1rpx solid var(--gy-border-color);
	        .panel-name{
	            min-width: 100rpx;
	            max-width: 170rpx;
	            line-height: 40rpx;
	            font-size: var(--gy-font-size-large);
	            font-weight: bold;
	            color: var(--gy-text-color-primary);
	            @include text-ellipsis(1);
	        }
	        .panel-name.underline{
	            position: relative;
	            z-index: 1;
	        }
	        .panel-name.underline::after{
	        	position: absolute;
	        	bottom: 5rpx;
	        	left: 0;
	        	content: "";
	        	width: 100%;
	        	height: 15rpx;
	            z-index: -1;
	        	background: var(--gy-color-primary-linear-gradient);
	        }
	        .panel-more {
	            max-width: calc(100% - 170rpx);
	            .panel-more-btn{
	                height: 60rpx;
	                display: flex;
	                align-items: center;
	                padding: 0 10rpx;
	                border-radius: var(--gy-border-radius-medium);
	                margin-right: -10rpx;
	                text {
	                    color: var(--gy-text-color-secondary);
	                    font-size: var(--gy-font-size-base);
						line-height: var(--gy-font-size-base);
	                    padding-right: 8rpx;
	                    padding-bottom: 3rpx;
	                }
	            }
	            .panel-more-btn:active{
	                background-color: #F7F7F7;
	            }
	        }
	    }
	}
	.gy-panel.card{
	    margin: var(--gy-gap);
	}

</style>
